<template>
  <div class="el-card" :class="$attrs.shadow ? 'is-' + $attrs.shadow + '-shadow' : 'is-always-shadow'">
    <div v-if="$slots.header || header" class="el-card__header">
      <slot name="header">{{ header }}</slot>
    </div>
    <div class="el-card__body" :style="bodyStyle">
      <slot />
    </div>
    <div v-if="showPagination()" class="el-card__pagination">
      <div :class="['prev', {disabled: currentPage === 1}]" role="button" @click="prev">
        <svg-icon icon-class="Left" />
        <!-- <i class="el-icon-back" /> -->
        <!-- <span>{{ $t('common.prev_page') }}</span> -->
      </div>
      <el-pagination
        ref="pagination"
        :layout="layout"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        :pager-count="pagerCount"
        @current-change="currentChange"
        @size-change="handleSizeChange"
      />
      <div v-show="layout.length === 0">
        <span
          style="font-style: italic"
          class="mr-2 text-secondary"
        >{{ `${(currentPage - 1) * pageSize + 1}-${currentPage * pageSize > total ? total : currentPage * pageSize } of ${total}` }}</span>
        Page:{{ currentPage }}
      </div>
      <div
        :class="['next', {disabled: (currentPage === getPageCount() || getPageCount() == 0)}]"
        role="button"
        @click="next"
      >
        <svg-icon icon-class="Right" />
        <!-- <span>{{ $t('common.next_page') }}</span> -->
        <!-- <i class="el-icon-right" /> -->
      </div>
    </div>
  </div>
</template>

<script>
import { Card } from 'element-ui'
export default {
  extends: Card,
  props: {
    header: {},
    layout: {
      type: String,
      default: 'total, pager, sizes'
    },
    bodyStyle: {
      type: Object
    },
    pageCount: Number,
    pagerCount: {
      type: Number,
      default: 7
    },
    pageSize: {
      type: Number,
      default: 20
    },
    total: Number,

    /**
     * AUTO_HIDE / SHOW / HIDE
     */
    showFlag: {
      type: String,
      default: 'AUTO_HIDE'
    },
    currentPage: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      // currentPage: 1
    }
  },
  methods: {
    showPagination() {
      if (this.showFlag === 'HIDE') {
        return false
      }
      if (this.total != undefined) {
        if (this.showFlag === 'SHOW') {
          return true
        }

        if (this.showFlag === 'AUTO_HIDE' && this.total > this.pageSize) {
          return true
        }
      }
      return false
    },
    handleSizeChange(pageSize) {
      this.$emit('page-size-change', pageSize)
    },
    getPageCount() {
      if (!this.total) {
        return 0
      }
      if (this.pageSize < 2) {
        this.pageSize = 1
      }
      let t = this.total / this.pageSize
      t = Math.ceil(t)
      return t
    },
    prev() {
      if (this.currentPage === 1) {
        return
      }
      this.$refs.pagination.prev()
    },
    currentChange(page) {
      this.$emit('current-change', page)
    },
    next() {
      if (this.currentPage > this.pageCount) {
        return
      }
      this.$refs.pagination.next()
    }
  }
}
</script>

<style lang="scss">
.el-card__pagination {
  padding: 0;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // border-top: 1px solid $elCardPaginationBorderColor;
  .page-selector .el-input__inner {
    width: 65px;
  }
  .next,
  .prev {
    font-size: 14px;
    height: 48px;
    display: flex;
    align-items: center;
    font-weight: 500;
    @apply text-secondary;
    border: none;
    &:hover {
      color: var(--color-primary);
    }
    &.disabled {
      color: #dddddd;
      cursor: not-allowed;
    }
  }
  .prev, .next {
    padding-right: 20px;
    padding-left: 20px;
  }

  .el-pagination {
    padding: 10px 5px;
    display: inline-block;
  }
}
</style>

